<template>
  <div class="profile-notify">
    <!-- 
    1.快递送达通知  ---  您的订单已送达
    2.用户修改资料成功通知  --- 您的资料修改成功
    3.用户修改密码成功通知  --- 您的密码修改成功
    4.快递配送通知  ---  您的订单正在配送中
    -->
    <div v-for="item in notifyList" :key="item.id" class="profile-notify-items">
      <div class="profile-notify-left">
        <div class="profile-notify-left-icon">
          <svg class="alibaba-icon" aria-hidden="true">
            <use :xlink:href="`#${ item.icon }`"></use>
          </svg>
        </div>
        <div class="profile-notify-left-info">
          <div class="profile-notify-left-info-title">{{ item.title }}</div>
          <div class="profile-notify-left-info-desc">{{ item.desc }}</div>
        </div>
      </div>
      <div class="profile-notify-right">{{  item.time  }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const notifyList = ref([
  {
    id: 1,
    icon: 'icon-box',
    title: '您的订单已送达',
    desc: '您的订单已送达至您下单地址',
    time: '2023-01-01 10:10:10'
  },
  {
    id: 2,
    icon: 'icon-profile',
    title: '账户信息修改成功',
    desc: '您已成功修改账户信息',
    time: '2023-06-21 12:31:42'
  },
  {
    id: 3,
    icon: 'icon-3701mima',
    title: '账户密码修改成功',
    desc: '您已成功修改账户密码，请妥善保管',
    time: '2024-02-21 13:51:23'
  },
  {
    id: 4,
    icon: 'icon-truck',
    title: '您的订单已开始配送中',
    desc: '订单即将配送至您下单地址',
    time: '2024-07-21 16:36:31'
  }
])
</script>

<style lang="less" scoped>
@primary-color: #088395;
@primary-hover-color: rgb(22, 162, 184);
@primary-font-family: 'Helvetica';

.profile-notify {
  width: 100%;
  font-family: @primary-font-family;

  .profile-notify-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .profile-notify-left {
      display: flex;
      align-items: center;

      .profile-notify-left-icon {
        width: 53px;
        height: 53px;
        border-radius: 50%;
        background: #0883950D;
        display: flex;
        align-items: center;
        justify-content: center;

        .alibaba-icon {
          width: 24px;
          height: 24px;
          fill: #088395;
        }
      }
      
      .profile-notify-left-info {
        margin-left: 16px;

        .profile-notify-left-info-title {
          color: rgb(20, 28, 29);
          font-size: 16px;
          font-weight: 700;
        }

        .profile-notify-left-info-desc {
          margin-top: 15px;

          color: rgb(163, 170, 171);
          font-size: 16px;
          font-weight: 400;
        }
      }
    }

    .profile-notify-right {
      color: rgb(163, 170, 171);
      font-size: 16px;
      font-weight: 400;
    }
  }

  .profile-notify-items:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid #A3AAAB33;
  }

  .profile-notify-items:not(:first-child) {
    padding-top: 20px;
  }
} 
</style>